<template>
  <div style="position: relative">
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu v-for="(item, i) in nav" :key="i" :index="item.index">
            <template slot="title">
              <i class="el-icon-location" />
              <span>{{ item.title }}</span>
            </template>

            <el-menu-item v-for="(option, j) in item.options" :key="j" :index="`${item.index}-${j+1}`">{{ option }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <el-row class="tac">
      <el-menu
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :default-active="activeIndex"
        router
      >
        <NavMenu :navmenus="menuData" />
      </el-menu>
      <router-view />
    </el-row>
  </div>
</template>

<script>
import NavMenu from '@/components/Menu/NavMenu'
import { getSiteMenuTree } from '@/api/site'

export default {
  name: 'Login',
  components: {
    NavMenu: NavMenu
  },
  // eslint-disable-next-line vue/no-unused-components
  data() {
    return {
      nav: [
        {
          title: '导航一',
          index: '1',
          options: [
            '选项1',
            '选项2',
            '选项3',
            '选项4'
          ]
        },
        {
          title: '导航二',
          index: '2',
          options: [
            '选项1',
            '选项2',
            '选项3',
            '选项4'
          ]
        },
        {
          title: '导航三',
          index: '3',
          options: [
            '选项1',
            '选项2',
            '选项3',
            '选项4'
          ]
        }
      ],
      activeIndex: 'aa',
      menuData: [
        // {
        //   // 一级
        //   entity: {
        //     id: 0,
        //     name: 'aa',
        //     icon: 'el-icon-message',
        //     alias: '一级菜单'
        //   }
        // },
        // {
        //   // 一级
        //   entity: {
        //     id: 1,
        //     name: 'systemManage',
        //     icon: 'el-icon-message',
        //     alias: '两级菜单'
        //   },
        //   // 二级
        //   childs: [
        //     {
        //       entity: {
        //         id: 3,
        //         name: 'authManage',
        //         icon: 'el-icon-loading',
        //         alias: '权限管理',
        //         value: { path: '/example/menuexample' }
        //       }
        //     },
        //     {
        //       entity: {
        //         id: 4,
        //         name: 'roleManage',
        //         icon: 'el-icon-bell',
        //         alias: '角色管理',
        //         value: '/system/role'
        //       }
        //     },
        //     {
        //       entity: {
        //         id: 2,
        //         name: 'menuManage',
        //         icon: 'el-icon-edit',
        //         alias: '菜单管理',
        //         value: '/system/menu'
        //       }
        //     },
        //     {
        //       entity: {
        //         id: 5,
        //         name: 'groupManage',
        //         icon: 'el-icon-mobile-phone\r\n',
        //         alias: '分组管理',
        //         value: '/system/group'
        //       }
        //     }
        //   ]
        // },
        // {
        //   // 一级
        //   entity: {
        //     id: 6,
        //     name: 'userManage',
        //     icon: 'el-icon-news',
        //     alias: '三级菜单'
        //   },
        //   // 二级
        //   childs: [
        //     {
        //       entity: {
        //         id: 7,
        //         name: 'accountManage',
        //         icon: 'el-icon-phone-outline\r\n',
        //         alias: '帐号管理',
        //         value: ''
        //       },
        //       // 三级
        //       childs: [
        //         {
        //           entity: {
        //             id: 14,
        //             name: 'emailManage',
        //             icon: 'el-icon-sold-out\r\n',
        //             alias: '邮箱管理',
        //             value: '/content/email'
        //           }
        //         },
        //         {
        //           entity: {
        //             id: 13,
        //             name: 'passManage',
        //             icon: 'el-icon-service\r\n',
        //             alias: '密码管理',
        //             value: '/content/pass'
        //           }
        //         }
        //       ]
        //     },
        //     {
        //       entity: {
        //         id: 8,
        //         name: 'integralManage',
        //         icon: 'el-icon-picture',
        //         alias: '积分管理',

        //         value: '/user/integral'
        //       }
        //     }
        //   ]
        // },
        // {
        //   // 一级
        //   entity: {
        //     id: 40,

        //     name: 'contentManage',
        //     icon: 'el-icon-rank',
        //     alias: '四级菜单'
        //   },
        //   // er级
        //   childs: [
        //     {
        //       entity: {
        //         id: 41,
        //         name: 'classifyManage2',
        //         icon: 'el-icon-printer',
        //         alias: '分类管理'
        //       },
        //       // 三级
        //       childs: [
        //         {
        //           entity: {
        //             id: 42,
        //             name: 'classifyManage3',
        //             icon: 'el-icon-printer',
        //             alias: '分类管理'
        //           },
        //           // 四级
        //           childs: [
        //             {
        //               entity: {
        //                 id: 43,
        //                 name: 'classifyManage4',
        //                 icon: 'el-icon-printer',
        //                 alias: '分类管理',
        //                 value: '/content/classify'
        //               }
        //             }
        //           ]
        //         }
        //       ]
        //     }
        //   ]
        // }
      ]
    }
  },
  created() {
    // window.addEventListener('storage', this.afterQRScan)
    console.log('this.menuData:##############')
    this.getMenuTreeData()
  },
  methods: {
    getMenuTreeData() {
      getSiteMenuTree().then(response => {
        this.menuData = response.data
        console.log('this.menuData:' + this.menuData)
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-select {
    display: inline-block;
    height: 42px;
    width: 85%;
  }
  .el-input {
    display: inline-block;
    height: 42px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 3px 12px 15px;
      color: $light_gray;
      height: 42px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  //background-color: $bg;
  background: url("~@/assets/image/login_background.jpg");
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 110px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}
</style>
